iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
Modern Web

30天UIUX自學之路系列 第 27

Day27 使用者流程圖Userflow與Wireframe

  • 分享至 

  • xImage
  •  

來到Day27了,進入倒數階段衝衝衝!今天要來研究的是Userflow(使用者流程)及Wireframe(線框圖)。

使用者流程 Userflow

將使用者在使用APP時可能會操作的流程都畫下來,這份流程圖方便設計師與工程師溝通整個APP的使用流程有哪些,並且可以透過此流程圖發現使用者的操作情境下是否缺少某些頁面或是某些流程不流暢,可以作修改。

Task flow 任務流程:關於使用者使用APP的目的,到達成任務的這段流程。

https://ithelp.ithome.com.tw/upload/images/20221012/20151451qR8AtIrePQ.jpg
Photo by Kelly Sikkema on Unsplash

低擬真模型 Lofi-fidelity Wireframe

簡單的畫出APP的框架圖,僅使用黑白的方式作排版,並且寫好各區塊是作什麼,依照task flow的任務流程將介面指向到正確的頁面,透過低擬真的Wireframe與團隊討論並確定後,才會往高擬真的Wireframe前進。

https://ithelp.ithome.com.tw/upload/images/20221012/20151451nNmMJwHKvW.jpg
Photo by Amélie Mourichon on Unsplash

參考資料:
https://youtu.be/TIV1y11xz7k
圖片來源為unsplash無授權圖庫


上一篇
Day26 學習資訊架構與建立功能規格表
下一篇
Day28 開始做設計吧!
系列文
30天UIUX自學之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言